<template>
  <div>
    <!--头部区域-->
    <div style="height: 80px; line-height: 60px; background-color: white; margin-bottom: 2px; display: flex">
      <div style="width: 300px; padding: 5px">
        <img src="@/assets/logo.png" alt="" style="width: 50px; position: relative; left: 10px; top: 10px">
        <span style="margin-left: 15px; font-size: 27px;">图书管理系统</span>
      </div>
      <div style="flex: 1; text-align: right; padding-right: 20px; padding-top: 10px; color: dodgerblue">
        <el-dropdown size="medium" style="cursor: pointer" trigger="click">
        <span class="el-dropdown-link" style="font-size: 20px;">
          {{ login.username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
          <el-dropdown-menu slot="dropdown" style="margin-top: -5px;">
            <el-dropdown-item>
              <div style="width: 85px; text-align: center" @click="edit">修改个人信息</div>
            </el-dropdown-item>
            <el-dropdown-item>
              <div style="width: 80px; text-align: center" @click="logout">退出登录</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!--侧边栏和主体-->
    <div style="display: flex">
      <!--侧边栏导航-->
      <div
          style="width: 13%; min-height: calc(100vh - 62px); overflow: hidden; margin-right: 2px; background-color: white;">
        <el-menu :default-active="$route.path" router class="el-menu-demo" unique-opened>
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
          </el-menu-item>
          <el-submenu index="/borrow" v-if="!login.isAdmin">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>借阅管理</span>
            </template>
            <el-menu-item index="/bookBorrow">借阅图书</el-menu-item>
            <el-menu-item index="/borrowRecord">借阅记录</el-menu-item>
          </el-submenu>
          <el-submenu index="/user" v-if="login.isAdmin">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/addUser">用户批量添加</el-menu-item>
            <el-menu-item index="/listUser">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="/admin" v-if="login.isAdmin">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>管理员管理</span>
            </template>
            <el-menu-item index="/addAdmin">管理员批量添加</el-menu-item>
            <el-menu-item index="/listAdmin">管理员列表</el-menu-item>
          </el-submenu>
          <el-submenu index="/book" v-if="login.isAdmin">
            <template slot="title">
              <i class="el-icon-reading"></i>
              <span>图书管理</span>
            </template>
            <el-menu-item index="/addBook">图书批量添加</el-menu-item>
            <el-menu-item index="/listBook">图书列表</el-menu-item>
            <el-menu-item index="/bookBorrowRecord">借阅记录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>

      <!--主体数据-->
      <div style="flex: 1; background-color: white; width: 100vh; bottom: 10vh">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";

export default {
  name: "Layout",
  data() {
    return {
      login: Cookies.get('login') ? JSON.parse(Cookies.get('login')) : {}
    }
  },
  methods: {
    logout() {
      Cookies.remove('login')
      this.$router.push('/login')
    },
    edit(){
      if(this.login.isAdmin){
        this.$router.push('/editAdmin?uid=' + this.login.uid)
      }else{
        this.$router.push('/editUser?uid=' + this.login.uid)
      }
    }
  }
}
</script>

